<!--  -->
<template>
  <div
    class="music_container"
    v-loading="isLoading"
    element-loading-text="加载中..."
  >
    <div class="musicList">
      <div class="list_wrap">
        <div class="item_wrap">
          <div
            @dblclick="startSong(item)"
            v-for="(item, index) in songList"
            :key="index"
            class="item"
          >
            <div @click="toAlbum(item.al.id)" class="cover">
              <img :src="item.al.picUrl" alt="" />
            </div>
            <div class="info">
              <div
                :class="{ active_position: item.id === songId }"
                class="name"
              >
                {{ item.name }}
              </div>
              <div class="creator_name">{{ item.ar[0].name }}</div>
            </div>
            <div class="album">{{ item.al.name }}</div>
            <div class="timer">
              {{ Math.floor(item.dt / 1000) | timeFormat }}
            </div>
            <div class="btn">
              <div
                
                
                class="iconfont icon-xihuan like"
              ></div>
              <div
                @click="download(item.id, item.name)"
                class="iconfont icon-yunduanxiazai load"
              ></div>
            </div>
            <div class="mv">
              <el-button
                @click="toDetail(item.mv)"
                size="mini"
                v-if="item.mv != 0"
                type="primary"
                >mv</el-button
              >
            </div>
          </div>
        </div>
      </div>
    </div>

    <div class="pagination">
      <el-pagination
        background
        layout="prev, pager, next"
        :total="Math.ceil(count / 100) * 10"
        :pager-count="7"
        @current-change="getSearchList"
        :current-page.sync="currentPage"
      >
      </el-pagination>
    </div>
  </div>
</template>

<script>
import axios from "axios";

import { getSearchList } from "util/findMusic.js";
import { mapGetters } from "vuex";
import { getDownloadUrl } from "util/music.js";

export default {
  name: "",
  data() {
    return {
      keywords: this.$route.params.data
        ? this.$route.params.data
        : window.localStorage.getItem("keywords"),
      songList: [],
      musicUrl: "",
      count: 0,
      currentPage: 1,
    };
  },
  computed: {
    ...mapGetters("musicPlay", [
      // 加载状态
      "isLoading",
      //当前歌曲id
      "songId",
    ]),
  },
  created() {
    this.keywords = this.$route.params.data;
    this.getSearchList(1);
  },
  methods: {
    // //获取搜索建议
    // async getSearchSuggest() {
    //   let { data } = await getSearchSuggest(this.$route.params.data)
    //   // console.log(data)
    // },
    //获取歌单歌曲列表
    async getSearchList(page) {
      this.$store.dispatch("musicPlay/changeIsLoading", true);

      let {
        data: { result },
      } = await getSearchList(this.$route.params.data, 100, (page - 1) * 24, 1);
      // console.log(result)
      this.count = result.songCount;
      this.songList = result.songs;
      // console.log(this.songList);
      this.$store.dispatch("musicPlay/changeIsLoading", false);
    },
    //播放歌曲
    startSong(musicDetail, index) {
      // console.log(this.songListId);

      this.$store.dispatch("musicPlay/saveIsPlaying", true);

      //保存当前歌曲id
      this.$store.dispatch("musicPlay/saveSongId", musicDetail.id);

      //保存当前歌曲id并存入播放历史列表
      this.$store.commit("musicPlay/saveHasPlayList", musicDetail.id);
    },

    toDetail(id) {
      this.$store.dispatch("musicPlay/saveIsPlaying", false);
      this.$router.push("/mvDetail/" + id);
    },
    async download(id, name) {
      let {
        data: { data },
      } = await getDownloadUrl(id);
      // console.log(data)
      if (data.url) {
        const fileName = name; // 导出文件名
        axios({
          url: data.url,
          responseType: "blob",
          headers: { "content-type": "audio/mpeg" },
        }).then((res) => {
          // 对于<a>标签，只有 Firefox 和 Chrome（内核） 支持 download 属性
          // IE10以上支持blob但是依然不支持download
          const blob = new Blob([res.data], { type: res.data.type });
          if ("download" in document.createElement("a")) {
            // 支持a标签download的浏览器
            const link = document.createElement("a"); // 创建a标签
            link.download = fileName; // a标签添加属性
            link.style.display = "none";
            link.href = URL.createObjectURL(blob);
            document.body.appendChild(link);
            link.click(); // 执行下载
            URL.revokeObjectURL(link.href); // 释放url
          }
        });
      } else {
        this.$message("开通会员后可下载");
      }
    },
        //跳转去专辑
    toAlbum(id) {
      this.$router.push("/albumDetail/" + id);
    },
  },
};
</script>

<style lang='less' scoped>
.musicList {
  padding: 0 5.25rem;
  .list_wrap {
    // width: 80%;
    .item_wrap {
      .item {
        background-color: #fff;
        height: 40px;
        padding: 10px 0;
        display: flex;
        align-items: center;
        border-radius: 10px;
        .cover {
          margin: 0 10px;
          width: 45px;
          height: 45px;
          border-radius: 5px;
          img {
            width: 100%;
            height: 100%;
            border-radius: 5px;
            box-shadow: 2px 2px 12px 4px rgba(0, 0, 0, 0.1);
          }
        }
        .info {
          margin-left: 10px;
          width: 30%;
          .name {
            width: 100%;
            font-weight: 600;
            font-size: 17px;
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
          }
          .creator_name {
            color: #525252;
            font-size: 13px;
          }
          .active_position {
            color: #335eea;
          }
        }
        .album {
          color: #525252;
          width: 30%;
          font-size: 15px;
          white-space: nowrap;
          overflow: hidden;
          text-overflow: ellipsis;
        }
        .timer {
          margin-left: 5px;
          color: #525252;
          font-size: 15px;
        }
        .btn {
          width: 20%;
          display: flex;
          align-items: center;
          justify-content: center;
          div {
            display: none;
            margin-left: 20px;
          }
          div:hover {
            transform: scale(1.1);
          }
          .like {
            font-size: 23px;
          }
        }
        .mv {
          width: 8%;
          text-align: right;
          margin-right: 10px;
          &:hover .el-button {
            transform: scale(1.1);
          }
          .el-button {
            background-color: #fff;
            color: rgb(16, 24, 134);
            font-weight: 600;
            border: none;
            border-radius: 5px;
          }
        }
      }
      .item:hover {
        background-color: #f6f6f8;
      }
      .item:hover .btn div {
        display: block;
      }
    }
  }
}

.el-icon-video-camera:hover {
  color: red;
}
.pagination {
  margin-top: 20px;
  text-align: center;
}
::v-deep .el-pagination.is-background .el-pager li:not(.disabled).active {
  background-color: #ec4141;
  color: #fff;
}
::v-deep .el-pagination.is-background .el-pager li:hover {
  color: #ec4141;
}
.download {
  color: rgba(148, 131, 131, 0.753);
}
.download:hover {
  color: #333;
}
span.active_position {
  color: #ec4141;
}
</style>